/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { PureComponent } from "react";
import StandardTab from "@/components/StandardTab";
import PageHeaderLayout from "@/layouts/PageHeaderLayout";
import { connect } from "dva";
import Over from "./Tabs/Over";
import Set from "./Tabs/Set";
import Record from "./Tabs/Record";
import FeeDetail from "./Tabs/FeeDetail";
import styles from "./style.less";

@connect()
export default class Account extends PureComponent {
  state = {
    currentPage: 1,
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: "account/getUserAccount",
    });
    dispatch({
      type: "account/getAccountInfo",
    });
  }

  handleTabChange = activeKey => {
    this.setState({
      activeKey,
    });
  };

  handleChangePage = currentPage => {
    const { activeKey = "0" } = this.state;
    if (activeKey != 0) return;
    this.setState({
      currentPage,
    });
  };

  render() {
    const { currentPage, activeKey } = this.state;
    return (
      <PageHeaderLayout title="资金账户">
        <div className={`${styles.main} ${styles.account} standard-tab`}>
          <StandardTab
            activeKey={activeKey}
            onTabClick={() => {
              this.handleChangePage(1);
            }}
            name="Account"
            onChange={this.handleTabChange}
            panes={[
              {
                tab: "账户余额",
                component: (
                  <Over
                    onSwitchTab={this.handleTabChange}
                    currentPage={currentPage}
                    onChangePage={this.handleChangePage}
                  />
                ),
              },
              {
                tab: "提现账户设置",
                component: <Set onSwitchTab={this.handleTabChange} />,
              },
              {
                tab: "提现账户资金流水",
                component: <Record type="withdraw" />,
              },
              {
                tab: "消费账户资金流水",
                component: <Record type="avail" />,
              },
              {
                tab: "共配费用明细",
                component: <FeeDetail />,
              },
            ]}
          />
        </div>
      </PageHeaderLayout>
    );
  }
}
